<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>files</title>
    <style>
        .a_link {
            display: flex;
            flex-direction: column;
            width: 100px;
            float: left;
            margin: 10px;
        }

        .label_text {
            position: absolute;
            line-height: 128px;
            display: block;
            width: 128px;
            font-weight: bold;
            color: #13227a;
            text-align: center;
            font-size: 22px;
        }

        .name_text {
            width: 100px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin-top: 110px;
            width: 128px
        }
    </style>
</head>

<body>

    <div id="images" style="width: 100%;height: 100%;"></div>
    <script>
        const proto = location.origin.indexOf("https") == 0 ? "https://" : "http://"

        var fileList = []
        var imageParent = document.getElementById("images")
        function parseResult(result) {
            let json;
            if (typeof result === 'string') {
                json = JSON.parse(result);
            } else {
                json = result;
            }
            // const json = JSON.parse(result);
            fileList = json;
            fileList.sort(function (a, b) {
                return a.localeCompare(b, undefined, { sensitivity: 'base' });
            });



            let string = "";
            for (let i = 0; i < json.length; ++i) {
                string += "<a class=\"a_link\" href=" + json[i] + " target=\"_blan\">"

                let name = json[i].substring(json[i].lastIndexOf("/") + 1)
                string += "<img style=\"position:absolute;padding:15px;width:88px\" src=\"ic_other_file.png\"/>"

                string += "<text class=\"name_text\">" + name + "</text>"
                string += "</a>"
                // string += "<a href="+json[i]+" target=\"_blan\"><img style=\"width:100px;margin:10px;display:block\" src=\""+json[i] ;
                // string += "\"><text></text></a>";
            }
            imageParent.innerHTML = string;
        }
    </script>

    <script type="text/javascript" src="./getrequest.js"></script>
    <script type="text/javascript">
        getRequest(proto + location.host
            + "/getOtherFiles", "", function (res) {
                console.log(res)
                // console.log(JSON.parse(res))
                parseResult(res)
            })
        // parseResult(["https://divaid.github.io/resources/books/nashannarennagou.txt","https://divaid.github.io/resources/books/guaimomotou.pdf", "https://divaid.github.io/resources/json/books.json"])
    </script>
</body>

</html>